<template name="components">
	<view style="height:calc(100vh - 50px);overflow:scroll;">
		<img src="/static/love_bg.jpg" style="position:absolute;right:0;width:100%;height:100%;z-index:-999;" />
		<view class="user-page light bg-orange" style="background-image: url('/static/avatar_bg.jpg'); z-index: 99;">  
		    <view class="avatar-container">  
				<image v-if="profileEmpty==false" :src="info.avatar" class="avatar"></image>  
				<image v-if="profileEmpty" src="/static/default_avatar.jpg" class="avatar"></image>
				<view class="user-info">  
					<text v-if="profileEmpty" class="nickname">资料未完善</text>  
					<text class="nickname">{{info.nick_name}}</text>
					<!-- <text class="nickname">{{info.register_code}}</text> -->
					<text class="membership-status" v-if="info.is_admin">管理员</text>
					<!-- <text class="membership-status">会员状态</text> -->
				</view>  
		    </view>  
		</view>
		<view class="cu-list menu card-menu margin-top">
			<view class="cu-item arrow" v-if="info.is_admin">
				<view class="content">
					<!-- <text class="cuIcon-vip text-grey"></text> -->
					<image src='../../static/zhuti.png' class='png' mode='aspectFit'></image>
					<text class="text-grey">我的会员</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="editProfile()">
				<view class="content">
					<text class="cuIcon-profilefill text-grey"></text>
					<text class="text-grey">个人资料</text>
				</view>
				<view class="action">
					<view v-if="profileEmpty" class="cu-tag round bg-orange light">填写资料！</view>
					<view v-if="info.status == 0" class="cu-tag round bg-blue light">审核中</view>
					<view v-if="info.status == 1" class="cu-tag round bg-olive light">已完成审核</view>
					<view v-if="info.status == 2" class="cu-tag round bg-orange light">审核未通过 （{{info.audit_expect}})</view>
				</view>
			</view>
			<view class="cu-item arrow" @tap="toInviteList()">
				<view class="content">
					<text class="cuIcon-likefill text-grey"></text>
					<text class="text-grey">邀请列表</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="toEditPassword()">
				<view class="content">
					<text class="cuIcon-lock text-grey"></text>
					<text class="text-grey">修改密码</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="toPrivacySettings()">
				<view class="content">
					<text class="cuIcon-settingsfill text-grey"></text>
					<text class="text-grey">隐私设置</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="showModal" data-target="DialogModal1">
				<view class="content">
					<text class="cuIcon-ellipse text-grey"></text>
					<text class="text-grey">退出登录</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu card-menu margin-top" v-if="info.is_admin">
			<view class="cu-item arrow" @tap="auditProfile()">
				<view class="content">
					<text class="cuIcon-writefill text-orange"></text>
					<text class="text-orange">资料审核</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="addRegisterCode()">
				<view class="content">
					<text class="cuIcon-writefill text-orange"></text>
					<text class="text-orange">添加注册码</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="addAdminer()">
				<view class="content">
					<text class="cuIcon-writefill text-orange"></text>
					<text class="text-orange">添加管理员</text>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">确认退出该账号吗?</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<!-- <view class="padding-sm">
					确认退出该账号吗?
				</view> -->
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="logout()">确定</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="cu-modal bottom-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green" @tap="logout()">确定</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-sm">
					确认退出该账号吗?
				</view>
			</view>
		</view> -->
		
	</view>
</template>

<script>
	import { profileInfo } from '../../api/account';
	export default {
		data() {
			return {
				info: {},
				profileEmpty: false,
				defaultAvatar: '',
				modalName: null
			};
		},
		created() {
			profileInfo().then(res => {
				if (res == undefined || (res.code != undefined && res.code == 1001)) {
					this.profileEmpty = true
					return
				}
				this.info = res
			}).catch(err => {
				console.log(err)
				return
			});
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			editProfile() {
				uni.navigateTo({
				    url: '/pages/tools/editProfile'
				});
				
				// uni.navigateTo({
				//     url: '/pages/user/mark'
				// });
			},
			auditProfile() {
				uni.navigateTo({
				    url: '/pages/audit/list'
				});
			},
			toInviteList() {
				uni.navigateTo({
				    url: '/pages/invite/list'
				});
			},
			toPrivacySettings() {
				uni.navigateTo({
				    url: '/pages/user/privacy_settings'
				});
			},
			toEditPassword() {
				uni.navigateTo({
				    url: '/pages/user/edit_password'
				});
			},
			logout() {
				this.modalName = null
				uni.clearStorage()
				uni.reLaunch({
				    url: '/pages/tools/login',
					success() {
						history.pushState(null, null, location.href);
					}
				});
			},
			addRegisterCode() {
				uni.navigateTo({
				    url: '/pages/user/add_registerCode'
				});
			},
			addAdminer() {
				uni.navigateTo({
				    url: '/pages/user/add_adminer'
				});
			}
		}
	}
</script>

<style>
.user-page {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 150px; /* 使页面全屏高度 */  
  /* background-color: #efb60a; */
}  
  
.avatar-container {  
  text-align: center; /* 文本居中（对于非Flex子元素） */  
  width: 100%; /* 根据需要设置宽度 */  
}  
  
.avatar {  
  width: 50px; /* 头像宽度 */  
  height: 50px; /* 头像高度 */  
  border-radius: 50%; /* 圆形头像 */  
  margin-bottom: 10px; /* 头像和昵称之间的间距 */  
}  
  
.user-info {  
  display: flex;  
  flex-direction: column; /* 垂直排列昵称和会员状态 */  
  align-items: center; /* 垂直居中 */  
}  
  
.nickname {  
  font-size: 16px; /* 昵称字体大小 */  
  color: #333; /* 昵称颜色 */  
  margin-bottom: 5px; /* 昵称和会员状态之间的间距 */  
}  
  
.membership-status {  
  font-size: 14px; /* 会员状态字体大小 */  
  color: #ff0000; /* 会员状态颜色 */  
}
</style>